var _EDITABLE_ = 1;
var _SHOW_ = 0;
_$.FormItem = function(target){
    var _this = this;
    _$.FormItem.superclass.constructor.call(_this,target);
};

_$.extend(_$.FormItem,_$.Component,{
    isFormItem:true,
    value:"",
    _uiCls:_$._uiPreCls + "FormItem",
    _cls:_$._clsPre + "formItem",
    _spanCls:_$._uiPreCls + "span",
    validState:true,
    initialization:false,
    errMsg:[],
    _create :function(){
        var _this = this;
        if(_this._isEdit()){
            _this._editModel();
        }else{
            _this._showModel();
        }
        _this.initialization=true;
        _this.el.attr("formId",_this.id);
    },
    _editModel:function(){
    },
    _showModel:function(){
        var _this = this;
        _this._clearEdit();
        var source='<div class="showDiv"></div>';
        _this._replaceNode(source);
        _this.component = $(".showDiv",_this.el);
        _this.el.addClass(_this._uiCls);
        _this.el.addClass(_this._spanCls);
        _this.setOption("model",_SHOW_);
        _this._init();
    },
    _clearShow:function(){
        var _this = this;
        if(_this.component){
            _this.component.remove();
        }
    },
    _clearEdit:function(){
        var _this = this;
        if(_this.component){
            _this.component.unbind();
            _this.component.remove();
        }
    },
    _init:function(){
        var _this = this;
        var initValue= _this.options["initValue"];
        if(isNotEmpty(initValue)){
            _this.setValue(initValue);
        }
        _this._loadSuccess();
    },
    _attrProps:function(){
        var _this = this;
        var properties = _$.FormItem.superclass._attrProps.call(_this);
        properties.addAll(['name',"qtype",'initValue','nameCn',"required-msg",{'required':'boolean',model: 'number',validRules:'json',"relationship":"array"}]);
        return properties;
    },
    _attrOpts:function(){
        var _this = this;
        var opts = _$.FormItem.superclass._attrOpts.call(_this);
        return $.extend(true,opts,{
            model:1
        });
    },
    _isEdit:function(){
        var _this = this;
        return _this.options.model == _EDITABLE_;
    },
    _sync:function(){
        var _this = this;
        _this.value =   _this.component.val();
    },
    _validateItem:function(rule){
        var _this = this;
        var value = _this.getValue();
        var nameCn = _this.getOption("nameCn");
        return  _$.validator.execute(value,nameCn,rule);
    },
    _showErrMsg:function(){
        var _this = this;
        $(".form_item_valid",_this.el).html( _this.errMsg.join(","));
    },
    _replaceNode:function(temp){
        var _this = this;
        var source='<div id="{{id}}" >'+ temp +'<p class="form_item_valid"></p><div class="form_item_memo">{{remark}}</div></div>';

        if(_this._isEdit()){
             source='<div id="{{id}}" >'+ temp +'<p class="form_item_valid"></p><div class="form_item_memo">{{remark}}</div></div>';
        }else{
             source='<div id="{{id}}" >'+ temp +'</div>';
        }
        var template = Handlebars.compile(source);
        var result = template(_this.options);
        var element = $(result);
        _this.el.replaceWith(element);
        _this.el = element;
        _this.el.attr("componentId",_this.uid);
    },
    reset:function(){
        var _this = this;
        var initValue = _this.getOption("initValue");
        _this.setValue(initValue);
    },
    setValue:function(value) {
        var _this = this;
        if(isEmpty(value)){
            _this.value = null;

            if (_this._isEdit()) {
                _this.component.val("");
            } else {
                _this.component.html("");
            }
        }else{
            _this.value = value;
            if (_this._isEdit()) {
                _this.component.val(value);
            } else {
                _this.component.html(value);
            }
        }
    },
    getValue:function(){
        var _this = this;
        if(_this._isEdit()){
            _this._sync();
        }
        return _this.value;
    },
    setValid:function(flag){
        var _this = this;
        _this.validState = flag;

        if(_this.validState){
            _this.errMsg=[];
        }
        this._showErrMsg();
    },
    validate:function (rules){
        var _this = this;
        var v_flag = true;
        var errMsg = [];

        if(isNotEmpty(rules) && rules.length >= 0){

            rules.each(function(rule){
                var res = _this._validateItem(rule);

                var state = res["state"];
                var info = res["info"];

                if(v_flag && !state){
                    v_flag = state;
                    errMsg.add(info);
                }
            });
        }

        return {
            "flag": v_flag,
            "errMsg": errMsg
        };
    },
    isValid:function(){
        var _this = this;

        if(!_this.el.is(":visible")){
            return true;
        }
        var validRules =_this.getOption("validRules");
        var nameCn = _this.getOption("nameCn");
        var required = _this.getOption("required");

        var required_msg = _this.getOption("required-msg");

        if(validRules){
            var rules = [];
            if(required == true){
                var required_rule = {};
                required_rule["type"] = "required";
                required_rule["value"] = validRules["required"];
                required_rule["msg"] = validRules["required-msg"];
                rules.add(required_rule);
            }


            for(var key in validRules){
                if(!key.endWith("msg")){
                    var rule = {};
                    rule["type"] = key;
                    rule["value"] = validRules[key];
                    rule["msg"] = validRules[key + "-msg"];

                    rules.add(rule);
                }
            }


            var res = _this.validate(rules);
            var flag = res.flag;
            _this.errMsg = res.errMsg;
            _this.setValid(flag);
            return flag;
        }
        return true;
    },
    getEditValue:function(values){
        var _this = this;
        var initValue = _this.getOption("initValue") ;
        var current = _this.getValue();

        var key =  _this.id;
        if(isEmpty(initValue) && isNotEmpty(current)){
            values[key] = current;
        }else if(isNotEmpty(initValue) && isEmpty(current)){
            values[key] = null;
        }else if(isNotEmpty(initValue) && isNotEmpty(current) && (initValue != current)){
            values[key] = current;
        }
    },
    setModel:function(model){
        var _this = this;

        if(_this.options.model == _SHOW_ && model == _EDITABLE_){
            _this._editModel();
        }else if(_this.options.model == _EDITABLE_ &&  model == _SHOW_){
            _this._showModel();
        }
    },
    _bindEvents:function(){
        var _this = this;
        _$.FormItem.superclass._getEvents.call(_this, ["onchange"]);
    },
    destroy : function() {
        var _this = this;
        if(_this._isEdit()){
            _this._clearEdit();
        }else{
            _this._clearShow();
        }
        _$.Text.superclass.destroy.call(_this);
    }
});